<template>
	<view>
		<!-- 开始补液 -->
		<view v-if="status === 'supplying'" class="supplying">
			<view class="center u-f-dcc">
				<water-wave :percent="40" :canvasWidth="800" :canvasHeight="800"></water-wave>
			</view>
			<view class="info u-f-jse">
				<view class="u-f-dcc">
					<text>{{ predictWeight }}吨</text>
					<text>本次预计补液量</text>
				</view>
				<view class="u-f-dcc">
					<!-- <text>大约12分钟</text> -->
					<text>未知</text>
					<text>预计补液时长</text>
				</view>
			</view>
		</view>
		<!-- <button type="default" @click="chooseLocation">打开地图选择位置</button>
		<button type="default" open-type="openSetting">打开设置页</button> -->
		<!-- 准备确认 -->
		<ready-confirm ref="readyConfirm" @confirmEvent="startSupply"></ready-confirm>
		<!-- 智能补液错误提示 -->
		<manual-supply ref="manualSupply" @confirmEvent="gotoPage"></manual-supply>
		<!-- 请求开启位置授权 -->
		<auth-ask></auth-ask>
	</view>
</template>

<script>
import readyConfirm from '@/components/ready-confirm.vue';
import authAsk from '@/components/auth-ask.vue';
import waterWave from '@/components/water-wave.vue';
import manualSupply from "@/components/manual-supply.vue";
export default {
	components: { readyConfirm, authAsk, waterWave, manualSupply },
	data() {
		return {
			show: true,
			status: 'unsupply', // 补液状态 unsupply --未开始 supplying --补液中  supplied --补液完成
			isAuthorized: false, // 是否已授权,
			site: '',
			predictWeight:'' // 预计补液量
		};
	},
	computed:{
		taskMsgs(){
			return this.$store.state.taskMsgs;
		}
	},
	onLoad(options) {
		this.$socket.dispatch('check');
		this.site = JSON.parse(decodeURIComponent(options.site));
		this.predictWeight = ((this.site.totalWeight - this.site.actualRestWeight)/1000).toFixed(2);
		// 判断补液任务是否在进行中
		let flag = this.taskMsgs.some(item => item.bucket_id===this.site.bucketId);
		if(this.site.status==='supplying' || flag){
			this.status = 'supplying';
		} else {
			setTimeout(()=>{
				this.$refs.readyConfirm.open();
			},300)
		}
	},
	onReady() {
		// uni.getSetting({
		// 	success: res => {
		// 		console.log('获取设置', res);
		// 		if (!res.authSetting['scope.userLocationBackground']) {
		// 			this.isAuthorized = true;
		// 			wx.authorize({
		// 				scope: 'scope.userLocationBackground',
		// 				success: e => {
		// 					console.log('同意使用后台持续定位');
		// 					this.startLocationUpdateBackground();
		// 				},
		// 				fail: err => {
		// 					// 授权拒绝
		// 					this.isAuthorized = false;
		// 					console.log(err);
		// 				}
		// 			});
		// 		} else {
		// 			this.startLocationUpdateBackground();
		// 		}
		// 	}
		// });
		// this.startLocationUpdateBackground()
	},
	destroyed() {
		this._locationChangeFn && uni.offLocationChange(this._locationChangeFn);
		uni.stopLocationUpdate();
	},
	methods: {
		chooseLocation() {
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				highAccuracyExpireTime: 3000,
				success: res => {
					console.log(res);
				}
			});
		},
		startLocationUpdateBackground() {
			uni.startLocationUpdateBackground({
				success: res => {
					console.log(res, '后台更新位置开启成功');
					this._locationChangeFn = function(res) {
						console.log('location change', res);
					};
					uni.onLocationChange(this._locationChangeFn);
				},
				fail: err => {
					console.log('后台更新位置开启失败', err);
				}
			});
		},
		startSupply() {
			const { siteId, bucketId } = this.site;
			if(!siteId || !bucketId) {
				uni.showModal({
					content: `${siteId}--${bucketId}`
				})
			}
			this.$u.api._autoSupply({ siteId, bucketId }).then(res => {
				console.log(res);
				if(res.code===500) {
					this.$refs.manualSupply.open();
				} else {
					this.status = 'supplying';
				}
			});
		},
		gotoPage() {
			uni.redirectTo({
				url:`./noSensor?site=`+ encodeURIComponent(JSON.stringify(this.site))
			})
		}
	}
};
</script>

<style lang="scss">
.c-gray {
	color: #808080;
}

.supplying {
	.center {
		margin-top: 140rpx;
	}

	.info > view {
		& > text:nth-child(1) {
			font-weight: 800;
			font-size: 36rpx;
		}
		& > text:nth-child(2) {
			color: #808080;
			font-size: 26rpx;
		}
	}
}
</style>
